<!-- 归档导航（标签页版） -->
<div class="card-widget card-archive-nav" th:with="allArchives = ${postFinder.archives(1,999)},
     allPosts = ${postFinder.list(1,1)},
     allTags = ${tagFinder.listAll()},
     allCategories = ${categoryFinder.listAll()}">
    <!-- 标签页头部 -->
    <div class="archive-nav-tabs">
        <div class="nav-tab" data-tab="archive">
            <i class="haofont hao-icon-list"></i>
            <span>文章目录</span>
        </div>
        <div class="nav-tab active" data-tab="about">
            <i class="haofont hao-icon-user"></i>
            <span>个人简介</span>
        </div>
    </div>

    <!-- 标签页内容 -->
    <div class="archive-nav-content">
        <!-- 文章目录 -->
        <div class="tab-pane" id="archive-pane">
            <div class="archive-year-list">
                <div class="archive-year-item" th:each="archive,iterStat : ${allArchives.items}">
                    <div class="year-title" 
                         th:classappend="${iterStat.last ? 'expanded' : 'collapsed'}"
                         th:data-year="${archive.year}">
                        <span class="year-text" th:text="${archive.year}"></span>
                        <span class="year-toggle">
                            <i class="haofont" th:classappend="${iterStat.last ? 'hao-icon-angle-down' : 'hao-icon-angle-right'}"></i>
                        </span>
                    </div>
                    <div class="month-list" th:style="${iterStat.last ? 'display:block' : 'display:none'}">
                        <a class="month-item" 
                           th:each="month : ${archive.months}"
                           th:href="${'/archives#month-' + archive.year + '-' + month.month}"
                           th:text="${month.month + ' 月'}">
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 个人简介 -->
        <div class="tab-pane active" id="about-pane">
            <div class="about-profile">
                <!-- 头像 -->
                <div class="profile-avatar">
                    <img src="/themes/theme-hao/assets/images/sidebar/profile.webp" 
                         alt="头像" class="avatar-img">
                </div>
                
                <!-- 昵称（修改这里的默认值） -->
                <div class="profile-name" >派大星</div>
                
                <!-- 个性签名（修改这里的默认值） -->
                <div class="profile-motto" >万念不乱心,金刚不摧志</div>

                <!-- 统计数据（服务端渲染） -->
                <div class="profile-stats">
                    <div class="stat-item">
                        <div class="stat-label">文章</div>
                        <div class="stat-value" th:text="${allPosts.total}">0</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">标签</div>
                        <div class="stat-value" th:text="${#lists.size(allTags)}">21</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">分类</div>
                        <div class="stat-value" th:text="${#lists.size(allCategories)}">5</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 内联样式 -->
<style>
.card-archive-nav{background:rgba(255,240,250,.85);border-radius:12px;padding:0;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.12)}
.archive-nav-tabs{display:flex;background:rgba(186,85,211,.08);border-bottom:2px solid rgba(186,85,211,.15)}
.nav-tab{flex:1;padding:.5rem .3rem;text-align:center;cursor:pointer;transition:all .3s ease;border-bottom:2px solid transparent;margin-bottom:-2px;font-size:.72rem;color:#6b4c7a;display:flex;flex-direction:column;align-items:center;gap:.2rem}
.nav-tab i{font-size:.9rem}
.nav-tab:hover{background:rgba(186,85,211,.1);color:#ba55d3}
.nav-tab.active{background:rgba(255,240,250,.9);color:#ba55d3;border-bottom-color:#ba55d3;font-weight:600}
.archive-nav-content{padding:.85rem}
.tab-pane{display:none}
.tab-pane.active{display:block}
.archive-year-list{display:flex;flex-direction:column;gap:.35rem}
.archive-year-item{border-bottom:1px solid rgba(186,85,211,.1);padding-bottom:.35rem}
.archive-year-item:last-child{border-bottom:none}
.year-title{display:flex;justify-content:space-between;align-items:center;padding:.45rem .55rem;border-radius:5px;cursor:pointer;transition:all .3s ease;background:rgba(255,255,255,.3)}
.year-title:hover{background:rgba(186,85,211,.15);transform:translateX(2px)}
.year-title.expanded{background:rgba(186,85,211,.12);color:#ba55d3;font-weight:600}
.year-text{font-size:.88rem;font-weight:600;color:#4a2c5f}
.year-title.expanded .year-text{color:#ba55d3}
.year-toggle{transition:transform .3s ease}
.year-toggle i{font-size:.75rem;color:#8b5a8e}
.year-title.expanded .year-toggle i{color:#ba55d3}
.month-list{display:none;padding-left:.7rem;margin-top:.35rem}
.month-item{display:block;padding:.35rem .5rem;border-radius:5px;text-decoration:none;color:#6b4c7a;transition:all .25s ease;font-size:.75rem;position:relative;padding-left:1.1rem}
.month-item::before{content:'•';position:absolute;left:.35rem;color:#ba55d3;font-weight:bold;font-size:.7rem}
.month-item:hover{background:rgba(186,85,211,.1);color:#ba55d3;transform:translateX(4px)}
/* 个人简介样式 */
.about-profile{display:flex;flex-direction:column;align-items:center;padding:1.2rem .8rem;min-height:260px}
.profile-avatar{width:85px;height:85px;border-radius:50%;overflow:hidden;margin-bottom:.9rem;border:3px solid rgba(186,85,211,.25);box-shadow:0 4px 12px rgba(186,85,211,.2)}
.avatar-img{width:100%;height:100%;object-fit:cover}
.profile-name{font-size:1.05rem;font-weight:700;color:#4a2c5f;margin-bottom:.5rem}
.profile-motto{font-size:.72rem;color:#6b4c7a;text-align:center;line-height:1.6;margin-bottom:1.2rem;padding:0 .6rem;white-space:nowrap;overflow:visible}
.profile-stats{display:flex;justify-content:space-around;width:100%;padding:.9rem 0;border-top:1px solid rgba(186,85,211,.15);border-bottom:1px solid rgba(186,85,211,.15)}
.stat-item{display:flex;flex-direction:column;align-items:center;gap:.35rem}
.stat-label{font-size:.7rem;color:#8b5a8e}
.stat-value{font-size:1.15rem;font-weight:700;color:#ba55d3}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
</style>

<!-- 内联脚本 -->
<script>
(function() {
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initArchiveNav);
    } else {
        initArchiveNav();
    }
    
    function initArchiveNav() {
        const navTabs = document.querySelectorAll('.card-archive-nav .nav-tab');
        const tabPanes = document.querySelectorAll('.card-archive-nav .tab-pane');
        const yearTitles = document.querySelectorAll('.year-title');
        
        // 标签页切换
        navTabs.forEach(tab => {
            tab.addEventListener('click', function() {
                const targetTab = this.getAttribute('data-tab');
                
                // 移除所有激活状态
                navTabs.forEach(t => t.classList.remove('active'));
                tabPanes.forEach(p => p.classList.remove('active'));
                
                // 激活当前标签
                this.classList.add('active');
                document.getElementById(targetTab + '-pane').classList.add('active');
            });
        });
        
        // 年份折叠/展开
        yearTitles.forEach(yearTitle => {
            yearTitle.addEventListener('click', function() {
                const monthList = this.nextElementSibling;
                const isExpanded = this.classList.contains('expanded');
                const toggleIcon = this.querySelector('.year-toggle i');
                
                if (isExpanded) {
                    // 折叠
                    this.classList.remove('expanded');
                    this.classList.add('collapsed');
                    monthList.style.display = 'none';
                    toggleIcon.className = 'haofont hao-icon-angle-right';
                } else {
                    // 展开
                    this.classList.remove('collapsed');
                    this.classList.add('expanded');
                    monthList.style.display = 'block';
                    toggleIcon.className = 'haofont hao-icon-angle-down';
                }
            });
        });
    }
})();
</script>

